<template>
  <div class="lbox">
    <div class="lib" v-for="item in propItems" :key="item.prop">
      <div class="lib-1">{{ item.name }}</div>
      <div
        :class="item?.underline ? 'underline lib-2' : 'lib-2'"
      >
        <span @click="handleClick(item, detail)">{{ detail[item.prop] }}{{item?.ryz ? ' RYZ':''}}</span>
        <img
          v-if="item?.copy"
          @click="copyDomText(detail[item.prop])"
          style="width: 14px; margin-left: 6px"
          src="@/assets/images/fuzhi.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { copyDomText } from "@/utils/common";
const router = useRouter();
interface IProps {
  propItems: IPropItem[];
  detail: IDetail;
}
interface IDetail {
  [index: string]: any;
}
interface IPropItem {
  name: string;
  prop: string;
  underline?: boolean;
  ishash?: boolean;
  copy?: boolean;
  ryz?: boolean;
}

const { propItems, detail } = defineProps<IProps>();

const emits = defineEmits(["handleClick"]);

const handleClick = (item: IPropItem, detail: IDetail) => {
  if (item.ishash) {
    copyDomText(detail[item.prop])
    // router.push({
    //   path: "/webview",
    //   query: {
    //     hash: detail[item.prop],
    //   },
    // });
  } else if (item.underline) {
    const ditem = {
      key: item.prop,
      value: detail[item.prop],
      uid: detail.id,
    };
    emits("handleClick", ditem);
  }
};
</script>
    
<style lang="scss" scoped>
.lbox {
  .lib {
    min-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .lib-1 {
      font-size: 13px;
      color: #878b97;
    }
    .lib-2 {
      text-align: right;
      font-size: 13px;
      color: #000;
      width: 190px;
      word-break: break-all;
      line-height: 18px;
    }
    .underline {
      text-decoration: underline;
    }
  }
}
</style>